<template>
	<view>
		<view class="divider"></view>
		<view class="plant-page">
			<!-- 筛选条件 -->
			<uni-section title="筛选条件" type="line">
				<view class="filter-box">
					<!-- 状态选择 -->
					<uni-data-checkbox v-model="selectedStatus" :localdata="statusOptions"></uni-data-checkbox>

					<!-- 时间选择 -->
					<view class="date-box">
						<uni-datetime-picker type="date" v-model="startDate" placeholder="开始时间" />
						<uni-datetime-picker type="date" v-model="endDate" placeholder="结束时间" />
					</view>
				</view>
			</uni-section>

			<!-- 种植管理列表 -->
			<uni-section title="种植管理列表" type="line">
				<view class="plant-list">
					<uni-card v-for="(item, index) in filteredList" :key="index" :is-shadow="false">
						<view class="card-content">

							<!-- 基本信息 -->
							<view class="info">
								<text class="title">{{ item.plot }} - {{ item.crop }}</text>
								<view class="row-box">
									<text class="detail">育苗日期：{{ item.seedDate }}</text>
									<text class="detail">负责人：{{ item.manager }}</text>
								</view>
								<text class="detail">详情：{{ item.detail }}</text>
								<!-- 生长进度条 -->
								<view class="progress-box">
									<text class="progress-label">生长进度：</text>
									<progress :percent="item.progress" activeColor="#4caf50" stroke-width="3" />
								</view>
							</view>
						</view>
					</uni-card>
				</view>
			</uni-section>
		</view>
		<view class="container">
			<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
				:direction="direction" @trigger="trigger" @fabClick="fabClick" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive
	} from 'vue'
	import { onBackPress } from '@dcloudio/uni-app'
	
	function goToInputOperation() {
		uni.navigateTo({
			url: "/pages/farming/inputOperation/inputOperation",
		});
	}
	
	function goToInputCrop() {
		uni.navigateTo({
			url: "/pages/farming/inputCrop/inputCrop",
		});
	}

	// 状态选项
	const statusOptions = [{
			text: '全部',
			value: 'all'
		},
		{
			text: '进行中',
			value: 'ongoing'
		},
		{
			text: '已结束',
			value: 'finished'
		}
	]
	const selectedStatus = ref('all')
	const today = formatDate(new Date())
	
	// fab 引用
	const fabRef = ref(null)
	// 响应式数据
	const title = ref('uni-fab')
	const directionStr = ref('垂直')
	const horizontal = ref('left')
	const vertical = ref('bottom')
	const direction = ref('horizontal')
	
	const pattern = reactive({
	  color: '#7A7E83',
	  backgroundColor: '#fff',
	  selectedColor: '#007AFF',
	  buttonColor: '#007AFF',
	  iconColor: '#fff'
	})
	const is_color_type = ref(false)
	const content = reactive([
	  {
	    iconPath: '/static/image.png',
	    selectedIconPath: '/static/image-active.png',
	    text: '新增作物',
	    active: false
	  },
	  {
	    iconPath: '/static/home.png',
	    selectedIconPath: '/static/home-active.png',
	    text: '新增操作',
	    active: false
	  }
	])
	
	// 生命周期钩子：返回键处理
	onBackPress(() => {
	  if (fabRef.value && fabRef.value.isShow) {
	    fabRef.value.close()
	    return true
	  }
	  return false
	})
	
	// 方法
	function trigger(e) {
	  content[e.index].active = !e.item.active
	  if(e.index === 0) {
	  	goToInputCrop();
	  } else{
	  	goToInputOperation();
	  }
	}
	
	function fabClick() {
	  // uni.showToast({
	  //   title: '点击了悬浮按钮',
	  //   icon: 'none'
	  // })
	}
	
	function switchBtn(hor, ver) {
	  if (hor === 0) {
	    direction.value = direction.value === 'horizontal' ? 'vertical' : 'horizontal'
	    directionStr.value = direction.value === 'horizontal' ? '垂直' : '水平'
	  } else {
	    horizontal.value = hor
	    vertical.value = ver
	  }
	}
	
	function switchColor() {
	  is_color_type.value = !is_color_type.value
	  if (is_color_type.value) {
	    pattern.iconColor = '#aaa'
	    pattern.buttonColor = '#fff'
	  } else {
	    pattern.iconColor = '#fff'
	    pattern.buttonColor = '#007AFF'
	  }
	}

	// 默认值就是今天
	const startDate = ref(today)
	const endDate = ref(today)

	// 获取今天日期并格式化为 yyyy-MM-dd
	function formatDate(date) {
		const y = date.getFullYear()
		const m = String(date.getMonth() + 1).padStart(2, '0')
		const d = String(date.getDate()).padStart(2, '0')
		return `${y}-${m}-${d}`
	}

	// 模拟数据
	const plantList = ref([{
			img: '/static/img/rice.jpg',
			plot: '地块A',
			crop: '水稻',
			detail: '种植面积【45】，种植【90】株，打老叶【8】次，整枝打杈【23】次，落蔓【4】，施肥【4】次，人工受粉【19】，其他【5】次，打药【2】次，疏花疏果【13】次，绕蔓【21】次',
			seedDate: '2025-11-17',
			progress: '40',
			manager: '张三',
			status: 'ongoing'
		},
		{
			img: '/static/img/wheat.jpg',
			plot: '地块B',
			crop: '小麦',
			detail: '小麦已收割完成',
			seedDate: '2025-11-15',
			progress: '65',
			manager: '李四',
			status: 'finished'
		},
		{
			img: '/static/img/wheat.jpg',
			plot: '地块c',
			crop: '小麦',
			detail: '种植面积【45】，种植【90】株，打老叶【8】次，整枝打杈【23】次，落蔓【4】，施肥【4】次，人工受粉【19】，其他【5】次，打药【2】次，疏花疏果【13】次，绕蔓【21】次',
			seedDate: '2025-11-18',
			progress: '65',
			manager: '李四',
			status: 'finished'
		},
		{
			img: '/static/img/wheat.jpg',
			plot: '地块d',
			crop: '小麦',
			detail: '小麦已收割完成',
			seedDate: '2025-11-19',
			progress: '65',
			manager: '李四',
			status: 'finished'
		}
	])

	// 筛选逻辑
	const filteredList = computed(() => {
		return plantList.value.filter(item => {
			// 状态筛选
			if (selectedStatus.value !== 'all' && item.status !== selectedStatus.value) {
				return false
			}
			// 时间筛选
			if (startDate.value && item.seedDate < startDate.value) return false
			if (endDate.value && item.seedDate > endDate.value) return false
			return true
		})
	})
</script>

<style lang="scss">
	.divider {
		height: 2rpx;
		background-color: #e0e0e0;
		// margin: 20rpx 0;
	}

	.plant-page {
		// padding: 20rpx;

		.filter-box {
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			padding: 0 30rpx;

			.date-box {
				display: flex;
				gap: 20rpx;

				.uni-datetime-picker {
					flex: 1;
				}
			}
		}

		.plant-list {
			// margin-top: 20rpx;

			.uni-card {
				// margin-bottom: 20rpx;

				.card-content {
					display: flex;
					flex-direction: row;
					gap: 20rpx;

					.plant-img {
						width: 200rpx;
						height: 200rpx;
						border-radius: 8rpx;
					}

					.info {
						flex: 1;
						display: flex;
						flex-direction: column;
						gap: 8rpx;

						.title {
							font-weight: bold;
							font-size: 28rpx;
						}

						.detail {
							font-size: 24rpx;
							color: #555;
						}

						.row-box {
							display: flex;
							flex-direction: row; // 横向排列
							justify-content: space-between; // 两端对齐
							align-items: center; // 垂直居中

							.detail {
								font-size: 24rpx;
								color: #555;
							}
						}


						.progress-box {
							display: flex;
							flex-direction: row; // 改成行排列
							align-items: center; // 垂直居中
							gap: 12rpx; // 文字和进度条之间留点间距

							.progress-label {
								font-size: 24rpx;
								color: #555;
								white-space: nowrap; // 防止换行
							}

							::v-deep uni-progress {
								flex: 1; // 进度条占满剩余空间
							}
						}
					}
				}
			}
		}
	}
</style>